<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 12px;
      }
      #app {
        width: 375px;
        background-color: #ddd;
        overflow: auto;
      }
      header {
        width: 100%;
        height: 100px;
        padding: 20px;
      }
      li {
        width: 345px;
        height: 100px;
        margin: 20px 15px;
        background-color: #fff;
        list-style: none;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .item-left {
        display: flex;
      }

      button {
        width: 20px;
      }
      input {
        width: 40px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <cart-header :total="total" @choose-all="chooseAll"></cart-header>
      <cart-main @price-change="change" ref="main"></cart-main>
    </div>
  </body>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="./data.js"></script>
  <script>
    // console.log(goods);
    const { createApp } = Vue;

    const CartHeader = {
      props: ["total"],
      template: `
        <header>
          <button @click="chooseAll">全选</button>  
          <button>反选</button>
          <p style="margin-top: 20px">总价: <span v-fixed="total"></span>元</p>  
        </header>
      `,
      methods: {
        chooseAll() {
          this.$emit("chooseAll");
        },
      },
    };

    const CartItem = {
      props: {
        item: Object,
      },
      template: `
        <li>
          <div class="item-left">
            <img src="./choose.png" v-show="!item.checked" style="width:20px;height:20px;align-self: center;" @click="choose(item.id)" />
            <img src="./choose2.png" v-show="item.checked" style="width:20px;height:20px;align-self: center;" @click="choose(item.id)" />
            <img :src="item.img" class="img" style="height: 70px;margin-right:5px" />  
            <div class="info">
              <h4>{{ item.title }}</h4>  
              <p>{{ item.price }}</p>
              <button @click="minus(item.id)">-</button>
              <input type="number" v-model="item.number" />
              <button @click="add(item.id)">+</button>
            </div>
          </div>  
          <div class="item-right">组件总价：￥<span v-fixed="item.number * item.price"></span></div>  
        </li>
      `,
      methods: {
        choose(id) {
          // console.log(id);
          this.$emit("goodsChoose", id);
        },
        add(id) {
          this.$emit("goodsAdd", id);
        },
        minus(id) {
          this.$emit("goodsMinus", id);
        },
      },
    };

    const CartMain = {
      data() {
        return {
          goods,
        };
      },
      computed: {
        goodsTotal() {
          return this.goods
            .filter((item) => item.checked)
            .reduce((sum, item) => {
              return (sum += item.price * item.number);
            }, 0);
        },
      },
      watch: {
        goodsTotal(val) {
          this.$emit("priceChange", val);
        },
      },
      mounted() {
        this.goods = this.goods.map((item, index) => ({
          ...item,
          checked: false,
          id: index + 1,
        }));
        console.log(this.goods);
      },
      template: `
        <ul>
          <p v-fixed="goodsTotal"></p>
          <cart-item
            v-for="item in goods"
            :key="item.title"
            :item="item"
            @goods-choose="change"
            @goods-add="add"
            @goods-minus="minus"
          ></cart-item>
        </ul>
      `,
      methods: {
        change(id) {
          // console.log(id);
          this.goods = this.goods.map((item) => {
            if (item.id === id) {
              return {
                ...item,
                checked: !item.checked,
              };
            } else {
              return item;
            }
          });
        },
        add(id) {
          this.goods = this.goods.map((item) => {
            if (item.id === id) {
              return {
                ...item,
                number: item.number + 1,
              };
            } else {
              return item;
            }
          });
        },
        minus(id) {
          this.goods = this.goods.map((item) => {
            if (item.id === id) {
              if (item.number > 0) {
                return {
                  ...item,
                  number: item.number - 1,
                };
              } else {
                return item;
              }
            } else {
              return item;
            }
          });
        },
        fn() {
          this.goods = this.goods.map((item) => ({ ...item, checked: true }));
        },
      },
      components: {
        CartItem,
      },
    };

    const app = Vue.createApp({
      data() {
        return {
          total: 0,
        };
      },
      methods: {
        change(v) {
          this.total = v;
        },
        chooseAll() {
          console.log("chooseAll");
          // 如果给子组件加ref属性，那么this.$refs.xxx打印的就是子组件的实例
          this.$refs.main.fn();
        },
      },
      components: {
        CartHeader,
        CartMain,
      },
    });

    app.directive("fixed", (el, binding) => {
      el.innerHTML = binding.value.toFixed(2);
    });

    app.mount("#app");
  </script>
</html>
